<%-- 
    Document   : index11
    Created on : 2015-9-24, 15:21:31
    Author     : Fire
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="plugins/react/react.js" type="text/javascript"></script>
        <script src="plugins/react/browser.min.js" type="text/javascript"></script>
        <script src="plugins/react/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/babel">
            var UserGist = React.createClass({
                getInitialState : function(){
                    return{
                        username:"",
                        lastGistUrl:''
                    };
                },
                componentDidMount : function(){
                    $.get(
                    this.props.source ,function(result){
                     var lastGist = result[0];
                     if(this.isMounted()){
                         this.setState({
                             username:lastGist.owner.login,
                             lastGistUrl:lastGist.html_url
                         });
                     }
                    }.bind(this)        
                    );
                },
                render : function(){
                    return (
                            <div>
                            {this.state.username}'s last gist is 
                            <a href={this.state.lastGistUrl}>here
                            </a>
                           </div>
                            );
                }
            });
            React.render(
            <UserGist source="https://api.github.com/users/octocat/gists" />,
            document.body
            );
        </script>
    </body>
</html>
